<template>
  <div class="chat">
    <div class="block">
      <el-timeline>
        <el-timeline-item
          :timestamp="$filters.formatTime(item.time)"
          placement="top"
          v-for="item in storyList.splice(0, 5)"
        >
          <el-card>
            <el-divider>
              <h2>{{ item.title }}</h2>
            </el-divider>
            <h4>{{ item.content }}</h4>
            <el-divider> </el-divider>
            <p>{{ $filters.formatTime(item.time) }} by {{ item.id }}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useStore } from '@/store'
import { computed } from '@vue/reactivity'

const store = useStore()

const test = () => {
  store.dispatch('story/getPageListAction', {
    pageName: 'story'
  })
}
store.dispatch('story/getPageListAction', {
  pageName: 'story'
})
const storyList = computed(() => {
  return store.state.story.storyList.map((item: any) => {
    return { content: item.content, time: item.createAt, title: item.title }
  })
})
</script>

<style scoped lang="less">
h2 {
  margin-top: -10px;
}
p {
  margin: -15px;
}
</style>
